<template>
    <div class="content message">
        <el-row class="orderType">
            <el-col :span="12">
                <el-menu :default-active="messageType" @select="changeMessageType" mode="horizontal">
                    <el-menu-item index="0">新消息 <MarkRemind class="mes_tips" :tipsNum="this.messageNumber.unreadCount"/></el-menu-item>
                    <el-menu-item index="1">已读消息</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="12" class="delete">
                <el-button type="danger" size="mini" @click="deleteMessage()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" class="cancelDelete" v-if="isSelect" @click="cancelCheck">取消</el-button>
            </el-col>
        </el-row>
        <Table :tableData="tableData" :isSelect="isSelect" @selection="selection" @change="changePage" @changes="changeSize">
            <template slot-scope="{scope}">
                <div v-if="scope.row.is_read == 0">
                    <el-button
                        type="primary"
                        size="small"
                         class="operate"
                        @click="look(scope.row)">
                        {{getPagePath(scope.row.notification_type)[0].label}}
                    </el-button>
                </div>
                <el-button v-if="scope.row.is_read == 1" type="primary" plain size="small" @click="look(scope.row)"> 详情 </el-button>
            </template>
        </Table>
        <!-- 消息查看 -->
        <DialogInput ref="message" :title="messageDetail.notification_title">
            <div class="rem-dialog-con reserva-dialog">
                <el-row>{{messageDetail.notification_message}}</el-row>
                <el-row class="messageSendTime">{{formatTime(messageDetail.send_time)}}</el-row>
            </div>
            <span slot="Remfooter">
                <el-button type="primary" size="small" class="dialog-button" @click="closeDialog()">我知道了</el-button>
            </span>
        </DialogInput>
        <!-- 删除警告 -->
        <DialogInput ref="delete" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否删除已选择的{{sectionArr.length}}条消息?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDetail()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue' 
    import DialogInput from '@component/common/DialogInput.vue' 
    import moment from 'moment'
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    // import { namespace } from 'vuex-class';
    import MarkRemind from '@component/common/MarkRemind.vue';
    // var messageStore = namespace('message')
    @Component({
        computed: {
            ...mapState({
                enterprise: 'enterprise',
                userInfo: 'userInfo',
                messageNumber: 'messageNumber'
            })
        },
        components:{
            Table,
            DialogInput,
            MarkRemind
        },
        methods: {
            ...mapActions([
                'getMessageNumber'
            ])
        }
    })
    export default class Message extends Vue {
        // @messageStore.Action('getMessageNumber') getMessageNumber!:Function;
        messageType:string = '0'
        messageDetail:any = {}
        isSelect = false
        sectionArr = []
        tableData:TableData = {
            header:[
                {
                    label: '消息标题',
                    key: 'notification_title'
                },
                {
                    label: '消息内容',
                    key: 'notification_message'
                },
                {
                    label: '消息时间',
                    key: 'send_time',
                    formatter: (row:any) => moment(row.send_time).format('YYYY-MM-DD HH:mm')
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            }
        }


        /*
         *后端状态表
            MSG_NOT_TEMP_0(0,"(卖方)录入票据审核失败通知"),
            MSG_NOT_TEMP_1(1,"(卖方)录入票据审核通过通知"),
            MSG_NOT_TEMP_2(2,"(卖方)发布票据审核通过通知"),
            MSG_NOT_TEMP_3(3,"(卖方)发布票据审核失败通知"),
            MSG_NOT_TEMP_4(4,"(卖方)待确认交易通知"),
            MSG_NOT_TEMP_5(5,"(卖方)待确认背书通知"),
            MSG_NOT_TEMP_6(6,"(卖方)重新发布通知"),
            MSG_NOT_TEMP_7(7,"(卖方)交易成功通知"),
            MSG_NOT_TEMP_8(8,"(卖方)票据过期失效"),
            MSG_NOT_TEMP_9(9,"(买方)竞价失败"),
            MSG_NOT_TEMP_10(10,"(买方)竞价已失效"),
            MSG_NOT_TEMP_11(11,"(买方)待付款"),
            MSG_NOT_TEMP_12(12,"(买方)待确认签收"),
            MSG_NOT_TEMP_13(13,"企业审核通过"),
            MSG_NOT_TEMP_14(14,"企业审核失败")
        */

        //页面跳转
        pageTarget = [
            {
                key: 0,
                label: '去修改',
                path: '/seller/posted',
                baseUrl: 'bills/bill',
                ableOperateCode: 800
            },{
                key: 1,
                label: '查看',
                path: '/seller/myBill/detail',
                baseUrl: 'bills/bill',
                ableOperateCode: 800
            },{
                key: 2,
                label: '查看',
                path: '/seller/myBill/detail',
                baseUrl: 'bills/bill',
                ableOperateCode: 801
            },{
                key: 3,
                label: '去修改',
                path: '/seller/editBill',
                baseUrl: 'bills/bill',
                ableOperateCode: 800
            },{
                key: 4,
                label: '去确认交易',
                path: '/seller/myBill/detail',
                baseUrl: 'bills/bill',
                ableOperateCode: 801
            },{
                key: 5,
                label: '去确认背书',
                path: '/seller/order/detail',
                baseUrl: 'orders/order',
                ableOperateCode: 806
            },{
                key: 6,
                label: '去重新发布',
                path: '/seller/order/detail',
                baseUrl: 'orders/order',
                ableOperateCode: 816
            },{
                key: 7,
                label: '查看',
                path: '/seller/order/detail',
                baseUrl: 'orders/order',
                ableOperateCode: 811
            },{
                key: 8,
                label: '查看',
                path: '/seller/myBill/detail',
                baseUrl: 'bills/bill',
                ableOperateCode: 800
            },{
                key: 9,
                label: '查看',
                path: '',
                baseUrl: '',
                ableOperateCode: ''
            },{
                key: 10,  //竞价的第二天，竞价失效
                label: '去重新竞价',
                path: '/buyer/myBidding/detail',
                baseUrl: 'bills/billProduct',
                ableOperateCode: 3  //bidding_bid_result
            },{
                key: 11,
                label: '去付款',
                path: '/buyer/order/detail',
                baseUrl: 'orders/order',
                ableOperateCode: 804
            },{
                key: 12,
                label: '去确认签收',
                path: '/buyer/order/detail',
                baseUrl: 'orders/order',
                ableOperateCode: 807
            },{
                key: 13,
                label: '查看',
                path: 'user.html#/approveEnterprise',
                baseUrl: 'customerInfoStatus/queryCustomerInfoStatus',
                ableOperateCode: 2  //agencyCertificationStatus
            },{
                key: 14,
                label: '去修改',
                path: 'user.html#/approveEnterprise',
                baseUrl: 'customerInfoStatus/queryCustomerInfoStatus',
                ableOperateCode: -1  //agencyCertificationStatus
            },{
                key: 100,
                label: '查看',
                path: '',
                baseUrl: '',
                ableOperateCode: ''
            }
            // ableOperateCode 表示当前正确的可操作的状态，用来判断当前待办事项是否已处理
        ]
    //methods
        formatTime (temp) {
            return moment(temp).format('YYYY-MM-DD HH:mm')
        }
        //最新订单/历史订单切换
        changeMessageType (tab) {
            this.messageType = tab
            this.getMessages()
        }
        //获取消息列表
        async getMessages() {
            let res = await this.$http.post('notis/notification/list',{
                isRead: this.messageType,
                pageSize: this.tableData.footer.pageSize,
                currentPage: this.tableData.footer.currentPage
            })
            if(res.status == 200){
                this.tableData.body = res.data.items
                this.tableData.footer.total = res.data.totalNum
                this.tableData.footer.pageSize = res.data.pageSize
                this.tableData.footer.currentPage = res.data.currentPage
            }
        }
        //
        getPagePath (typeId) {
            return this.pageTarget.filter(item => item.key == typeId)
        }
        async look (row) {
            //查看消息详情-将新消息置为已读
            let response = await this.$http.get(`notis/notification/${row.id}`)
            if(response.status == 200){
                this.getMessageNumber();
                this.getMessages();
                this.messageDetail = response.data
                if(row.notification_type == 9){ //竞价失败
                    //无需跳转的
                    this.$refs['message'].openDialog()
                    return false
                }
            }
            //上版本的消息
            if(row.notification_type == 100){
                return false
            }
            //获取目标页面的路径
            let targetPath = this.getPagePath(row.notification_type)[0].path
            //目标页面请求的url,coed
            let targetUrl = this.getPagePath(row.notification_type)[0].baseUrl
            let targetCode = this.getPagePath(row.notification_type)[0].ableOperateCode
            //目标页面订单、票据详情
            let res:any = null
            if(row.notification_type == 13 || row.notification_type == 14){
                let params = {
                    customerId1: this.userInfo.customer_id,
                    enterpriseId: this.userInfo.enterprise_id
                }
                res = await this.$http.get(targetUrl,{params})
            }else{
                res = await this.$http.get(targetUrl+`/${row.notification_id}`)
            }
            if(res.status < 300 && res.data){
                //订单状态
                if(row.notification_type == 5 || row.notification_type == 6 || row.notification_type == 7 || row.notification_type == 11 || row.notification_type == 12){
                    if(res.data.order_status_id != targetCode || res.data.bill_status_code != targetCode){
                        this.alreadyHandle()
                        return false
                    }
                }
                //票据状态
                if(row.notification_type == 1 || row.notification_type == 2 || row.notification_type == 4 || row.notification_type == 8){
                    if(res.data.bill_status_code != targetCode){
                        this.alreadyHandle()
                        return false
                    }
                }
                //竞价过期失效
                if(row.notification_type == 10){
                    let myBiddingStatus = res.data.bill_biddings.filter(item => item.is_mine == 1)
                    if(myBiddingStatus[0].bidding_bid_result != targetCode){
                        this.alreadyHandle()
                        return false
                    }
                }
                //企业审核失败
                if(row.notification_type == 14){
                    if(res.data.agencyCertificationStatus != targetCode){
                        this.alreadyHandle()
                        return false
                    }
                }
                this.jumpPage(row,res,targetPath)
            }
        }
        jumpPage (row,res,targetPath) {
            switch (row.notification_type) {
                //此状态由后台判断该待办事项是否已处理
                case 0:
                    //录入票据审核失败
                    if(res.data){
                        this.$router.push(targetPath+`/2/${row.notification_id}`)
                    }else{
                        this.alreadyHandle()
                    }
                    break;
                case 3:
                    //发布票据审核失败
                    if(res.data){
                        this.$router.push(targetPath+`/1/${row.notification_id}`)
                    }else{
                        this.alreadyHandle()
                    }
                    break;
                case 13:
                    window.location.href = targetPath
                    break;
                case 14:
                    window.location.href = targetPath
                    break;
                default:
                    this.$router.push(targetPath+`/${row.notification_id}`)
                    break;
            }
        }
        //待办事项已处理
        async alreadyHandle () {
            this.$alert('此待办事项已处理','提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box',
                callback: action => {
                    this.messageType == '0' ? this.getMessages() : ''
                }
            })
        }
        closeDialog () {
            this.$refs['message'].closeDialog()
            this.$refs['delete'].closeDialog()
            this.getMessages()
        }
        //显示/隐藏勾选框
        deleteMessage () {
            this.isSelect ? this.$refs['delete'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item
        }
        //点击删除按钮
        // click_delete () {
        //     this.$refs['delete'].openDialog()
        // }
        async confirmDetail () {
            let res = await this.$http.delete(`notis/notification/${this.sectionArr.map(item => item.id).join(',')}`)
            if(res.status < 300){
                this.$refs['delete'].closeDialog()
                this.getMessages()
                this.getMessageNumber()
                this.isSelect = false
            }
        }
        //分页回调
        changePage (page:number) {
            this.tableData.footer.currentPage = page
            this.getMessages()  
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            this.getMessages()  
        }
        mounted () {
            this.getMessages()
        }
    }
</script>

<style lang="scss" scoped>
    .orderType{
        border-bottom: 1px solid $__color-primary;
        .delete {
            text-align: right;
            .el-button{
                border-radius: 4px;
                font-size: 14px;
            }
        }
        .mes_tips {
            position: absolute;
            right: -18px;
            top: 8px;
        }
    }
    .messageSendTime{
        margin-top: 20px;
    }
    .operate{
        width: 92px;
        border-radius: 4px;
        font-size: 14px;
        padding: 9px 10px;
    }
</style>
<style lang="scss">
    .message{
        .el-table{
            tr td:nth-child(2),tr td:nth-child(3){
                .cell{
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
            }
        }
        .orderType{
            .el-menu.el-menu--horizontal{
                border-bottom: none !important;
            }
        }
    }
</style>
